<template>
  <Page :action-name="actionName"
    :seed-name="seedName" 
    :micro-name="microName"
    :multiple="multiple"
    :index="index"
    :ref-field-name="fieldName"
    :value="value"
    @current-change="onChoose"
    @selection-change="onChoose"
  />
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue'
  // import { toCamelCase } from '@/utils/func'
  import { Column } from '@/seed-application/types';
  import { getNameColumn } from '@/seed-application/utils/SeedUtil';  
  import { Page } from '@/components/Page'
  import { getRelAction } from '@/seed-application/utils/RelUtil';

  const props = defineProps<{column: Column, value?: any, label?: string, multiple?: boolean, index?: boolean}>()
  const emits = defineEmits(['choose'])

  const value = ref(props.value)
  const label = ref(props.label)
  watch(() => props.value, (val) => value.value = val, { immediate: true })
  watch(() => props.label, (val) => label.value = val, { immediate: true })

  const action = getRelAction(props.column)
  const actionName = action.name
  const seedName = action.seed.name
  const microName = action.micro?.name

  const nameColumn = getNameColumn(action.seed)
  const fieldName = 'id' // toCamelCase(columnName)

  function onChoose(selection) {
    if(props.multiple) {
      const selectedRows = selection || []
      value.value = selectedRows.map(row => row[fieldName]).join(',')
      label.value = selectedRows.map(row => row[nameColumn]).join(',')
    } else {
      const currentRow = selection || {}
      value.value = currentRow[fieldName]
      label.value = currentRow[nameColumn]
    }
    emits('choose', value.value, label.value)
  }
</script>
<style lang="less" scoped>
  .box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 2px;

    div {
      grid-auto-flow: row dense;
    }
  }
  /* 修改高亮当前行颜色 */
  :deep(.el-table tbody tr:hover>td) {
    background: #D4D7DE !important;
  }

  :deep(.el-table tbody tr.current-row>td) {
    background: #409EFF !important;
  }
</style>